Dark Mode - #2730
Conversation
…color usage in all relevant components
…ere but colors.scss
richardebeling
left a comment
richardebeling
left a comment
There was a problem hiding this comment.
generally looks good -- we can also merge partial progress here if we just "hide" the selector, in case you already want to get some changes / fixes in.
| }) | ||
| }) | ||
| }) | ||
| })() No newline at end of file |
There was a problem hiding this comment.
missing trailing newline
| /*! | ||
| * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/) | ||
| */ | ||
|
|
There was a problem hiding this comment.
What's this about? This reads like copyright trouble
| /*if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| document.documentElement.setAttribute('data-bs-theme', 'dark') | ||
| } else {*/ | ||
| document.documentElement.setAttribute('data-bs-theme', theme) | ||
| //} |
There was a problem hiding this comment.
commented code (repeated below)
| console.log("setTheme"); | ||
| console.log(theme); |
There was a problem hiding this comment.
Let's remove these, I think the document.setAttribute below should always work and not trigger too many debugging scenarios (applies to all console.logs here)
| } | ||
|
|
||
| @include button-disabled-variant(".btn-primary", $evap-dark-blue, $evap-light-blue); | ||
| @include button-disabled-variant(".btn-primary", $primary, $primary-accent); //TODO check which variants are needed |
There was a problem hiding this comment.
TODO check which variants are needed
janno42
left a comment
janno42
left a comment
There was a problem hiding this comment.
- please move the mode selection dropdown between mode selection and user dropdown
- please add a tooltip "Color mode" to the mode selection dropdown
import { unwrap } from "./utils";incolor-mode-toggler.jsfails withUncaught SyntaxError: import declarations may only appear at top level of a module
There was a problem hiding this comment.
-
on page reload, the page briefly flashes in light mode, even if it should be in dark mode
-
don't print
getPreferredThemein console please :) -
the collapsible's header in the global rewards overview needs a different color:
- highlighted rows are too bright, and the white text can't be read anymore:
- the horizontal lines in modals should be less bright:
- "grayed out" bars (grade distribution and voter progress) should be darker:
- highlighted results rows on the student index page should be more highlighted (here the first row is highlighted in black):
- on the results page, the border around the selected evaluation should be brighter:
- on the results page, the outline, center bar, and arrows of bipolar distributions should be dark:
-
maybe the participants badge should be inverted (many voters: bright, few voters: dark). what do you think?
-
selected buttons in
btn-switchshould be lighter (the contrast change should be similar to the one in light mode):
-
btn-lightseems to have no hover effect -
callouts (all types, not only info) and alerts should be darker (when open and when closed), the link contrast should be fixed, and the close button should be darker.
- the vote buttons should be darker:
- the icon on the additional textanswer button should have the usual
btn-lightcolor:
- 'card-outline-primary' should have the primary color :)
- the red border on questions with error should be brighter:
- the dropdown arrow in input fields should be brighter:
- because you're more or less on it already, could you make the colors of the input fields in light mode consistent?:
- disabled inputs should have the same color, even if they are tomselect inputs
-
we need different colors for badges in dark mode
-
the xmark for evaluations where grades will not be uploaded should be brighter:
- highlighted rows in the merge view should be darker:
- the background contrast of the selected tab should be higher:
3 participants
Closes #1039.